<template>
<q-page padding class="bg-grey-10">

    <q-card v-if="!isLoading" :class="
    $q.platform.is.mobile
      ? 'q-pa-sm q-mb-sm transparent '
      : 'q-pa-md q-mb-md transparent '
  ">
        <q-card-section class="q-pa-none">
            <div class="column ">
                <div class="row items-center q-gutter-sm">
                    <tips-title tipclass="bg-amber-6" class="col-auto text-h6 ellipsis" :title="projectinfo.name" :isSeparator="false"></tips-title>
                    <q-icon v-if="user.right>=4" @click="handleDialog('nameEdit')" name="edit" class="q-ml-xs" color="grey-4" />
                    <div class="col-grow row items-center justify-end">
                        <div v-if="projectinfo.status==0">
                            <q-badge v-if="projectinfo.process == 0" @click="handleDialog('ProcessEdit')" color="teal-6" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                策划中
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                            <q-badge v-if="projectinfo.process == 1" @click="handleDialog('ProcessEdit')" color="cyan-6" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                拍摄中
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                            <q-badge v-if="projectinfo.process == 2" @click="handleDialog('ProcessEdit')" color="blue-6" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                后期中
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                            <q-badge v-if="projectinfo.process == 3" @click="handleDialog('ProcessEdit')" color="amber-6" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                审阅中
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                            <q-badge v-if="projectinfo.process == 4" @click="handleDialog('ProcessEdit')" color="light-green-6" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                待结项
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                        </div>
                        <div v-if="projectinfo.status == 1">
                            <q-badge color="pink-6" @click="handleDialog('ProcessEdit')" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                已完成
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                        </div>
                        <div v-if="projectinfo.status == 2">
                            <q-badge color="green-6" @click="handleDialog('ProcessEdit')" outline class="q-ml-sm q-pa-xs q-mr-sm non-selectable">
                                待开始
                                <q-icon v-if="user.right>=4" name="edit" class="q-ml-xs" color="grey-4" />
                            </q-badge>
                        </div>
                        <q-circular-progress show-value font-size="12px" :value="projectinfo.progress" size="40px" :thickness="0.22" :color="projectinfo.color" track-color="primary" class="q-ma-none">
                            {{ projectinfo.progress }}%
                        </q-circular-progress>
                    </div>

                </div>

                <div class="q-ml-lg q-pl-md q-pb-md column" v-if="projectinfo.resolution">
                    <q-separator class="  q-my-sm" color="grey-9" />
                    <div class="row items-center q-gutter-sm">
                        <q-icon name="mdi-information-outline"></q-icon>
                        <q-badge color="amber-6" outline class=" q-pa-xs">
                            {{projectinfo.resolution}}

                        </q-badge>
                        <q-badge color="amber-6" outline class=" q-pa-xs">
                            {{projectinfo.aspectRatio}}

                        </q-badge>
                        <q-badge color="amber-6" outline class=" q-pa-xs ">
                            {{projectinfo.fps}} fps

                        </q-badge>
                    </div>
                    <div class="row q-gutter-sm items-center q-pt-xs">
                        <q-icon name="mdi-clock-time-nine-outline"></q-icon>
                        <q-badge color="amber-6" outline class=" q-pa-xs ">
                            {{projectinfo.stime}}-{{projectinfo.etime}}
                        </q-badge>

                    </div>

                </div>

            </div>

        </q-card-section>
    </q-card>

    <q-card v-if="!isLoading" :class="
    $q.platform.is.mobile
      ? 'q-pa-sm q-mb-sm transparent '
      : 'q-pa-md q-mb-md transparent '
  ">
        <tips-title tipclass="bg-cyan" class="text-subtitle1" title="策划"></tips-title>

        <div :class="
        $q.platform.is.mobile
          ? 'row q-pl-sm q-pt-md q-mb-sm'
          : 'row q-pl-md q-pt-md q-mb-sm'
      ">
            <div @click="onDoc" :class="
          $q.platform.is.mobile
            ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
            : 'col-2 q-pa-sm column items-center justify-evenly content-center'
        " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-file-document-multiple-outline" color="cyan" size="26px"></q-icon>
                <span>文案</span>
            </div>
            <div @click="onScript" :class="
          $q.platform.is.mobile
            ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
            : 'col-2 q-pa-sm column items-center justify-evenly content-center'
        " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-script-text-outline" color="cyan" size="26px"></q-icon>
                <span>脚本</span>
            </div>
            <div @click="onPreview" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                    <q-icon name="mdi-atom" color="cyan" size="26px"></q-icon>
                    <span>堪景</span>
                </div>

        </div>
    </q-card>
    <q-card  v-if="!isLoading" :class="
    $q.platform.is.mobile
      ? 'q-pa-sm q-mb-sm transparent '
      : 'q-pa-md q-mb-md transparent '
  ">
        <tips-title tipclass="bg-light-green" class="text-subtitle1" title="制作"></tips-title>

        <div :class="
      $q.platform.is.mobile
        ? 'row q-pl-sm q-pt-md q-mb-sm'
        : 'row q-pl-md q-pt-md q-mb-sm'
    ">

            <div @click="onShotplan" :class="
        $q.platform.is.mobile
          ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
          : 'col-2 q-pa-sm column items-center justify-evenly content-center'
      " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-ballot-outline" color="light-green" size="26px"></q-icon>
                <span>拍摄通告</span>
            </div>
            <div @click="onVideoList" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-nas" color="light-green" size="26px"></q-icon>
                <span>素材列表</span>
            </div>
            <div @click="onWatch" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-monitor-eye" color="light-green" size="26px"></q-icon>
                <span>监看</span>
            </div>

        </div>
    </q-card>
    <q-card v-if="!isLoading" :class="
    $q.platform.is.mobile
      ? 'q-pa-sm q-mb-sm transparent '
      : 'q-pa-md q-mb-md transparent '
  ">
        <tips-title tipclass="bg-blue" class="text-subtitle1" title="工具箱"></tips-title>

        <div :class="
      $q.platform.is.mobile
        ? 'row q-pl-sm q-pt-md q-mb-sm'
        : 'row q-pl-md q-pt-md q-mb-sm'
    ">
            <div :class="
        $q.platform.is.mobile
          ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
          : 'col-2 q-pa-sm column items-center justify-evenly content-center'
      " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onAsr">
                <q-icon name="mdi-microphone" color="blue" size="26px"></q-icon>
                <span>语音识别</span>
            </div>
            <div :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onEffect">
                <q-icon name="mdi-motion-outline" color="blue" size="26px"></q-icon>
                <span>特效库</span>
            </div>

            <div :class="
                $q.platform.is.mobile
                  ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
                  : 'col-2 q-pa-sm column items-center justify-evenly content-center'
              " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onMusic">
                <q-icon name="mdi-music-box-multiple-outline" color="blue" size="26px"></q-icon>
                <span>音乐库</span>
            </div>
            <div :class="
                    $q.platform.is.mobile
                      ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
                      : 'col-2 q-pa-sm column items-center justify-evenly content-center'
                  " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onSound">
                <q-icon name="mdi-surround-sound" color="blue" size="26px"></q-icon>
                <span>音效库</span>
            </div>
            <div :class="
                        $q.platform.is.mobile
                          ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
                          : 'col-2 q-pa-sm column items-center justify-evenly content-center'
                      " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onFont">
                <q-icon name="mdi-format-font" color="blue" size="26px"></q-icon>
                <span>字体库</span>
            </div>

        </div>
    </q-card>
    <q-card v-if="!isLoading" :class="
    $q.platform.is.mobile
      ? 'q-pa-sm q-mb-sm transparent '
      : 'q-pa-md q-mb-md transparent '
  ">
        <tips-title class="text-subtitle1 " title="项目"></tips-title>

        <div :class="
        $q.platform.is.mobile
          ? 'row q-pl-sm q-pt-md q-mb-sm'
          : 'row q-pl-md q-pt-md q-mb-sm'
      ">
            <div :class="
          $q.platform.is.mobile
            ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
            : 'col-2 q-pa-sm column items-center justify-evenly content-center'
        " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onReimburse">
                <q-icon name="mdi-cash-multiple" color="teal" size="26px"></q-icon>
                <span>报销</span>
            </div>
            <div v-if="user.right>=4" :class="
          $q.platform.is.mobile
            ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
            : 'col-2 q-pa-sm column items-center justify-evenly content-center'
        " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onQuote">
                <q-icon name="mdi-view-list" color="teal" size="26px"></q-icon>
                <span>报价</span>
            </div>
            <div v-if="user.right>=4" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onContract">
                <q-icon name="mdi-text-box-multiple-outline" color="teal" size="26px"></q-icon>
                <span>合同</span>
            </div>
            <div v-if="user.right>=4" :class="
              $q.platform.is.mobile
                ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
                : 'col-2 q-pa-sm column items-center justify-evenly content-center'
            " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onInvoice">
                <q-icon class="text-bold" color="teal" size="26px">
                  <svg t="1690466093407" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2654" width="400" height="400"><path d="M470.272 569.344H241.152c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h229.12c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72zM468.992 675.584H239.872c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h229.12c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z"  p-id="2655"></path><path d="M354.304 558.08c-8.96 0-17.408-3.84-23.296-10.752l-119.04-138.496c-11.008-12.8-9.728-32.256 3.328-43.264 12.8-11.008 32.256-9.728 43.264 3.328l94.976 110.592 90.112-110.848c10.752-13.056 29.952-15.104 43.264-4.352 13.056 10.752 15.104 29.952 4.352 43.264l-113.408 139.264c-5.632 7.168-14.336 11.264-23.296 11.264h-0.256z"  p-id="2656"></path><path d="M354.048 756.48c-16.896 0-30.72-13.824-30.72-30.72v-206.336c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72v206.336c0 16.896-13.568 30.72-30.72 30.72zM789.76 489.216h-188.928c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h188.928c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72zM789.76 646.912h-188.928c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h188.928c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z"  p-id="2657"></path><path d="M885.504 878.336h-747.52c-50.944 0-92.16-41.216-92.16-92.16V242.688c0-50.944 41.216-92.16 92.16-92.16h35.84c30.72 0 55.552 24.064 56.32 54.784l0.256 6.912c0.256 16.896 14.08 30.464 30.72 30.464h1.536c16.896 0 30.72-13.824 30.72-30.72v-5.12c0-30.976 25.344-56.32 56.32-56.32H422.4c30.72 0 56.064 25.088 56.32 55.808v6.656c0 16.896 13.824 30.464 30.72 30.464H513.792c16.896 0 30.464-13.824 30.464-30.72v-5.888c0-30.976 25.344-56.32 56.32-56.32h73.216c30.976 0 56.32 25.344 56.32 56.32v5.888c0 16.896 13.824 30.72 30.72 30.72s30.72-13.824 30.72-30.72v-5.888c0-30.976 25.344-56.32 56.32-56.32h37.632c50.944 0 92.16 41.216 92.16 92.16v543.488c0 50.688-41.472 92.16-92.16 92.16zM137.984 211.968c-16.896 0-30.72 13.824-30.72 30.72v543.488c0 16.896 13.824 30.72 30.72 30.72h747.52c16.896 0 30.72-13.824 30.72-30.72V242.688c0-16.896-13.824-30.72-30.72-30.72h-32.512v0.768c0 50.688-41.216 92.16-92.16 92.16s-92.16-41.216-92.16-92.16v-0.768h-62.976v0.768c0 50.432-41.216 91.904-91.648 92.16H509.44c-50.432 0-91.904-40.96-92.16-91.648v-1.536h-62.72c0 50.688-41.472 92.16-92.16 92.16h-1.536c-49.92 0-91.136-40.448-92.16-90.368v-1.536h-30.72z"  p-id="2658"></path></svg>
                </q-icon>
                <span>发票</span>
            </div>
            <div v-if="user.right>=4" :class="
                $q.platform.is.mobile
                  ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
                  : 'col-2 q-pa-sm column items-center justify-evenly content-center'
              " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onSettle">
                <q-icon name="mdi-wallet-outline" color="teal" size="26px"></q-icon>
                <span>结算</span>
            </div>
        </div>
    </q-card>
    <q-inner-loading :showing="isLoading" class="bg-grey-10">
      <q-spinner-cube
      color="primary"
      size="50px"
      class="q-mb-sm"
    />
      数据加载中……
  </q-inner-loading>

    <q-dialog v-model="isProcessEdit" :full-width="$q.platform.is.mobile">
        <q-card class="bg-dark" :style="$q.platform.is.desktop?'min-width:400px':''">
            <q-card-section class="q-pa-none">
                <q-toolbar class="bg-grey-7 text-white">

                    <div>项目进度</div>

                    <q-space />

                    <q-btn dense flat icon="close" v-close-popup>
                    </q-btn>
                </q-toolbar>
            </q-card-section>

            <q-card-section class="back-dark q-gutter-sm">
                <q-select filled dark v-model="status" map-options emit-value :options="statusOptions" option-label="name" option-value="val" label="修改状态" />
                <q-select v-if="status==0" filled map-options emit-value dark v-model="process" :options="processOptions" option-label="name" option-value="val" label="修改进度" />
            </q-card-section>
            <q-card-actions align="right">
                <q-btn outline color="white" @click="handleProcessSubmit" label="确认"></q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>

</q-page>
</template>

<script>
import {
    updateStatus
} from "assets/api/project"
export default {
    name: 'StudioIndex',
    props: {
        projectinfo: {
            type: Object
        },
        user: {
            type: Object
        }

    },
    data() {
        return {
          isLoading:true,
            pid: "",
            isProcessEdit: false,
            process: 0,
            status: 0,
            statusOptions: [{
                    name: "待开始",
                    val: 2,
                },
                {
                    name: "进行中",
                    val: 0,
                },
                {
                    name: "已完成",
                    val: 1,
                },
            ],
            processOptions: [{
                    name: "策划中",
                    val: 0,
                },
                {
                    name: "拍摄中",
                    val: 1,
                },
                {
                    name: "后期中",
                    val: 2,
                },
                {
                    name: "审阅中",
                    val: 3,
                },
                {
                    name: "待结项",
                    val: 4,
                },
            ]

        };
    },
    watch: {

        user: function (val) {

        }

    },
    created() {
        document.title="一方映画"
        this.pid = this.$route.params.pid;
        this.projectInfo = this.$store.state.projectinfo;

        // setTimeout(() => {
        //   document.title = this.projectInfo.name
        // }, 500);

    },
    mounted() {

      this.i_name = setInterval(() => {
        this.projectInfo = this.$store.state.projectinfo;
        if(this.projectInfo.name){
          document.title = this.projectInfo.name;
          this.isLoading=false;
          clearInterval(this.i_name)
        }

      }, 500);

    },
    methods: {
        onDoc() {
            this.$router.push("/doc/" + this.pid);
        },
        onScript() {
            this.$router.push("/script/" + this.pid);
        },
        onPreview() {
            this.$router.push("/recce/" + this.pid);
        },
        onShotplan() {
            this.$router.push("/shotplan/" + this.pid);
        },
        onVideoList() {
            this.$router.push("/videolist/" + this.pid);
        },
        onWatch(){
          this.$router.push("/monitor/" + this.pid);
        },
        onAsr(){
          this.$router.push("/asr/" + this.pid);
        },
        onEffect(){
          this.$router.push("/effect/" + this.pid);
        },
        onMusic() {
            this.$router.push("/music/" + this.pid);
        },
        onSound(){

        },
        onFont(){

        },
        onReimburse() {

        },
        onQuote(){
          this.$router.push("/price/" + this.pid);
        },
        onContract(){

        },
        onInvoice(){

        },
        onSettle(){
          this.$router.push("/settle/" + this.pid);
        },



        handleDialog(name) {
            if (this.user.right >= 4) {
                if (name == "nameEdit") {

                }
                if (name == "ProcessEdit") {
                    this.isProcessEdit = true;
                    this.process = this.projectinfo.process;
                    this.status = this.projectinfo.status;
                    console.log(this.process, this.status);
                }
                console.log('dialog', name);

            }

        },

        handleProcessSubmit() {
            this.$q.loading.show()
            updateStatus({
                pid: this.pid,
                status: this.status,
                process: this.process
            }).then(res => {
                this.$q.loading.hide()
                if (res.data.code == 1) {
                    this.$emit('reload', 'project');
                    this.isProcessEdit = false;
                    this.$message.success("修改项目状态成功！")
                } else {
                    this.$message.error("修改项目状态失败！")
                }
            })
        }
    },
}
</script>
